<div id="areas-options" style="width: 100%"></div>
<template type="text/html" id="areas-options-tpl">
    <div>
        <n-table class="table" >
            <n-thead>
                <n-tr>
                    <n-th>城市地区</n-th>
                    <n-th>服务价格(￥)</n-th>
                    <n-th>余额/微信分成比例(%)</n-th>
                    <n-th>会员卡分销值(￥)</n-th>
                    <n-th>操作</n-th>
                </n-tr>
            </n-thead>
            <n-tbody>
                <template v-for="(select,index) in selects" v-if="selects.length">
                    <n-tr>
                        <n-td style="padding: 30px 5px">
                            <n-cascader
                                v-model:value="select.city"
                                placeholder="请选择区域"
                                expand-trigger="hover"
                                :options="cityList"
                                :multiple="true"
                                check-strategy="child"
                                :max-tag-count="4"
                                :filterable="true"
                                :show-path="true"
                                value-field="id"
                                label-field="name"
                                style="width:300px"
                                @update:show="onShow(index)"
                            ></n-cascader>
                        </n-td>
                        <n-td style="padding: 30px 2px">
                            <n-space :vertical="true" >
                                <template v-for="(type,typeIndex) in typeList">
                                    <n-form-item :label="type+'类型'" label-placement="left" :show-feedback="false">
                                        <n-input-number v-model:value="select.prices[typeIndex]" :precision="2" min="0.01" button-placement="both" style="width: 150px"></n-input-number>
                                    </n-form-item>
                                </template>
                            </n-space>
                        </n-td>
                        <n-td>
                            <n-space :vertical="true">
                                <n-form-item label="无区代理的市代理分成比例(%)" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.city_rate0[0]" :precision="2" default-value="0" min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="有区代理的市代理分成比例(%)" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.city_rate1[0]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="区代理的分成比例(%)" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.district_rate[0]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="门店分成比例(%)" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.shop_rate[0]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="技师师傅分成比例(%)" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.worker_rate[0]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="上级用户分成比例(%)" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.user_rate[0]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                            </n-space>
                        </n-td>
                        <n-td>
                            <n-space :vertical="true">
                                <n-form-item label="无区代理的市代理分成值" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.city_rate0[1]" :precision="2" default-value="0" min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="有区代理的市代理分成值" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.city_rate1[1]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="区代理的分成值" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.district_rate[1]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="门店分成值" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.shop_rate[1]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="技师师傅分成值" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.worker_rate[1]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                                <n-form-item label="上级用户分成值" label-placement="left" :show-feedback="false">
                                    <n-input-number v-model:value="select.user_rate[1]" :precision="2" default-value="0"  min="0" button-placement="both" style="width: 150px"></n-input-number>
                                </n-form-item>
                            </n-space>
                        </n-td>
                        <n-td>
                            <n-button size="small" type="error" dashed @click="handleDelete(index)" >
                                <template #icon>
                                    <i class="n-icon feather icon-trash"></i>
                                </template>
                            </n-button>
                        </n-td>
                    </n-tr>
                </template>
            </n-tbody>
        </n-table>
        <n-button size="small" type="primary" dashed @click="onCreate" >
            <template #icon>
                <i class="n-icon feather icon-plus"></i>
            </template>
            添加
        </n-button>
        <input type="hidden" name="areas" :value="options">
    </div>
</template>

<script>
    Dcat.ready(function () {
        window.appInit('#areas-options',{
            template: "#areas-options-tpl",
            setup(){
                const selectIndex = Vue.ref(0)
                const cityList = Vue.ref(@json($cityList));
                const typeList = Vue.ref(@json($typeList));
                const selects = Vue.ref(@json($options));
                const onCreate = ()=>{
                    const select = {
                        city: [],
                        price: 0.00,
                        prices: [],
                        city_rate0: [0,0],
                        city_rate1: [0,0],
                        district_rate: [0,0],
                        shop_rate: [0,0],
                        worker_rate: [0,0],
                        user_rate: [0,0],
                    }
                    Vue.unref(selects)?.push(select)
                }
                const handleDelete = (index)=>{
                    Vue.unref(selects)?.splice(index,1)
                }
                Vue.watch(()=>selects.value,()=>{
                    console.log(Vue.unref(selects))
                })
                const options = Vue.computed(()=> JSON.stringify(Vue.unref(selects)))
                const handleDisable = (list = [], city = [])=>{
                    return list?.map(item=>{
                        if(city.length>0){
                            if(city.findIndex(index=>index===item.id)!==-1){
                                item.disabled = true;
                            }else{
                                item.disabled = false;
                            }
                        }else{
                            item.disabled = false;
                        }
                        if(item.children&&item.children.length){
                            item.children = handleDisable(item.children, city)
                            item.disabled = item.children.length === item.children.filter(child=>child.disabled).length
                        }
                        return item;
                    })
                }
                const getCityList = (index)=>{
                    let city = [];
                    Vue.unref(selects)?.filter((item,key)=> key!==index)?.forEach(item=>{
                        item.city.forEach(x=>city.push(x))
                    })
                    return handleDisable(cityList.value,city)
                }
                const onShow = (index)=>{
                    cityList.value = getCityList(index)
                    selectIndex.value = index
                }
                return {
                    cityList,
                    typeList,
                    selects,
                    onCreate,
                    handleDelete,
                    onShow,
                    options
                }
            }
        })
    })
</script>
